import * as echarts from '../../../../../ec-canvas/echarts';
const app = getApp();
var listX
var listY
var interval = 0

Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        aquariumId: wx.getStorageSync('userAquariumList')[wx.getStorageSync('curIndex')],

        ec: {
            onInit: {}
        },

        test: '测试',
        show: false
    },

    /**
     * 组件的方法列表
     */
    methods: {
        test() {
            interval = 0
        },

        //echarts
        initChart(canvas, width, height) {

            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            canvas.setChart(chart);

            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['电导率','高值预警',"低值预警"]
                },
                color:['#447ff4',"red","#f1ac57"],
                grid: {
                    left: '1%',
                    right: '30rpx',
                    bottom: '1%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: listX,
                    name: '',
                    nameGap: 2,
                    axisLabel: {
                        interval: interval,
                    },

                },
                yAxis: {
                    type: 'value',
                    name: '',
                    min:0,
                    max:1
                },
                series: [
                    {
                        symbol:"none",
                        name: '电导率',
                        type: 'line',
                        stack: '时间',
                        data: listY
                    },
                    {
                        symbol: "none",
                        name: '高值预警',
                        type: 'line',
                        // data: data.map(function (item) {
                        //     return item.phSize;
                        // }),
                        markLine: {
                            symbol: "none",               //去掉警戒线最后面的箭头
                            label: {
                                // position: "middle",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                                // formatter: "",
                                // color: "red"
                            },
                            data: [{
                                silent: false,             //鼠标悬停事件  true没有，false有
                                lineStyle: {               //警戒线的样式  ，虚实  颜色
                                    type: "solid",
                                    // color: "rgba(238, 99, 99)"
                                },
                                yAxis: "0.7"     //警戒线在y轴的坐标
                            }]
                        }
                    },
                    {
                        symbol: "none",
                        name: '低值预警',
                        type: 'line',
                        // data: data.map(function (item) {
                        //     return item.phSize;
                        // }),
                        markLine: {
                            symbol: "none",               //去掉警戒线最后面的箭头
                            label: {
                              
                            },
                            data: [{
                                silent: false,             //鼠标悬停事件  true没有，false有
                                lineStyle: {               //警戒线的样式  ，虚实  颜色
                                    type: "solid",
                                    // color: "rgba(238, 99, 99)"
                                },
                                yAxis: "0.5"     //警戒线在y轴的坐标
                            }]
                        }
                    }
                ],
                // 


            };
            chart.setOption(option);
            return chart;
        },

    },

    lifetimes: {
        async attached() {
            let time = Number(wx.getStorageSync('selectedDate'));
            console.log("缓存中获取的时间为：", time)

            //发送请求获取某一天的电导率
            let res = await new Promise((resolve, reject) => {

                wx.request({
                    url: `http://120.77.156.205:8808/wx/sensor-data/getDianDao/${this.data.aquariumId}/${time}`,
                    method: 'GET',
                    success: (res) => {
                        resolve(res.data)
                    },
                    fail: (err) => {
                        reject(err)
                    }
                })
            })
            console.log(res)

            if (res.code == 0) {
                listX = res.data.timeList
                listY = res.data.dianDaoList
                interval = listY.length / 10

                console.log(listX)
                this.setData({
                    ec: {
                        onInit: this.initChart
                    },
                })
            } else {
                throw new Error(res.message)
            }
            console.log(this.data.ec)

        }
    },
    observers: {
        'ec'(val) {
            console.log("变化")

            this.setData({
                show: true
            })

        }
    }
})
